<template>
  <!-- 从首页头像进入的--个人信息展示 -->
  <!-- 点击左上角箭头---回到-我-首页 -->
  <!-- 点击右上角进入-编辑个人信息 -->
  <div class="MyInfor">
    <van-nav-bar
        title="个人信息"
        left-text=""
        right-text="编辑个人信息"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <!-- 个人信息展示 -->
    <van-cell-group>
      <div class="row1">
        <van-image
            round
            width="5rem"
            height="5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <van-cell title="手机号" v-model="userPhone" class="row"/>
      <van-cell
          title="昵称"
          value="智慧熊"
          v-model="userName"
          class="row"
      />
      <van-cell is-link @click="btnBind">微信绑定</van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {mapGetters, mapActions} from "vuex";

export default {
  name: "MyInfor",
  mounted() {
    console.log('用户信息：' + this.loginUserInfo);
  },
  computed: {...mapGetters(["loginUserInfo", 'userPhone', 'userName'])},
  methods: {
    //返回-我
    onClickLeft() {
      this.$router.push("/my");
    },
    //进入我的个人信息编辑
    onClickRight() {
      this.$router.push("/UpdateMyInfor");
    },
    //点击微信绑定--解绑
    btnBind() {
      this.$dialog
          .confirm({
            title: "微信绑定",
            message: "请确认是否解除微信绑定？",
          })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
    },
  },
};
</script>

<style scope lang="less">
.center {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.row1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

img {
  width: 100%;
  height: 100%;
}
</style>
